<template>
  <div class="multi-line-ellipsis" v-if="shouldHideTooltip">
    <span ref="contentRef">{{ text }}</span>
  </div>
  <a-tooltip placement="topLeft" v-else>
    <template #title>
      <span>{{ text }}</span>
    </template>
    <div class="multi-line-ellipsis">
      <span ref="contentRef">{{ text }}</span>
    </div>
  </a-tooltip>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
    },
  },
  data() {
    return {
      shouldHideTooltip: true,
    };
  },
  mounted() {
    this.$nextTick(this.checkOverflow);
  },
  watch: {
    text() {
      this.$nextTick(this.checkOverflow);
    }
  },
  methods: {
    checkOverflow() {
      if (!this.$refs.contentRef) return;
      
      const parentHeight = this.$refs.contentRef.parentNode.offsetHeight;
      const contentHeight = this.$refs.contentRef.offsetHeight;
      
      // 判断是否需要显示tooltip (内容溢出时显示)
      this.shouldHideTooltip = contentHeight <= parentHeight;
    },
  },
};
</script>

<style lang="scss" scoped>
.multi-line-ellipsis {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
